import React from 'react';
import './Xiao.css';

const messages = [
  {
    id: 1,
    name: '张芳芳',
    message: '医生，我来报道啦',
    note: '备孕',
    date: '05月07日 15:48',
  },
  {
    id: 2,
    name: '肖蛋桑',
    message: '在吗？',
    note: '结直男癌',
    date: '05月07日 15:48',
  },
  {
    id: 3,
    name: '李云婷',
    message: '你好，什么时候换药？',
    note: '剖腹产住院',
    date: '05月07日 15:48',
  },
  {
    id: 4,
    name: '杨丽',
    message: '医生，我来报道啦',
    note: '宫颈癌术后一年',
    date: '05月07日 15:48',
  },
  {
    id: 5,
    name: '李小璐',
    message: '医生，我这个病怎么样',
    note: '问题不大,休整一年就好了',
    date: '05月07日 15:48',
  },
  {
    id: 6,
    name: '冯医生',
    message: '宫颈癌',
    note: '问题不大,做个手术',
    date: '05月07日 15:48',
  },
];

function Xiao() {
  return (
    <>
      <div className="appcx">
        <div className="content-wrapper">
          <div className="section-title">工作室消息</div>
          
          <div className="messages">
            {messages.map((msg) => (
              <div key={msg.id} className="message">
                <div className="avatar">
                  <img src="https://q3.itc.cn/q_70/images03/20250202/a040a6744049458ab174a66457e256e5.jpeg" alt="avatar" />
                </div>
                <div className="content">
                  <div className="info">
                    <h2>{msg.name}</h2>
                    <p>{msg.message}</p>
                  </div>
                  <div className="details">
                    <span className="note">{msg.note}</span>
                    <span className="date">{msg.date}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

export default Xiao;